<template>
  <div class="component-item" :class="active?'selected':''" v-if="moduleData">
    <div class="flex center preview-item-top">
      <div class="del" @click.stop="delModule">
        <Icon type="ios-trash" size='22' style="color: white;" />
      </div>
    </div>
    <div class="component-content banner-wrapper">
      <div class="flex center between">
        <div class="banner-top-title">{{moduleData.label_name_cn}}</div>
      </div>
      <div class="banner-desc">{{moduleData.label_info_summary}}</div>
      
      <div class="list disFlex vertical">
        <div v-for="(item,index) in moduleData.data" :key="index" class="item">
          <div class="item-content">
              <div class="goods-img disFlex">
                  <img style="width: 100%;" :src="item.image_path">
                  <div class="shop-wrapper">
                      <div class="shop">{{item.shop_title}} 赞助</div>
                      <div class="transfer-box">
                          <div class="point"></div>
                          <div class="box"></div>
                          <div class="row"></div>
                      </div>
                  </div>
              </div>
              <div class="position-message disFlex Flex-middle Flex-between">
                  <div class="left disFlex Flex-middle">
                      <div class="circle"></div>
                      <span>仅剩 {{item.stock_purchased}} 份</span>
                  </div>
                  <div class="right">{{item.join_member}} 人参与</div>
              </div>
              <div class="goods-title lineClamp l_2">{{item.goods_title}}</div>
              <div class="goods-message disFlex Flex-middle Flex-between">
                  <div class="left disFlex Flex-middle">
                      <div class="text">价值</div>
                      <div class="now">￥{{item.price_market}}</div>
                  </div>
                  <div class="right disFlex Flex-middle">
                      <div class="btn disFlex Flex-middle" :class="{btnOff: classNameFn(item.time_effect,item.time_failure)}">{{item.time_effect | btnTextFn(time_failure)}}</div>
                  </div>
              </div>
          </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    name: 'bargainChannelModule',   
  props: {
    /**
       * @description 起始值，即动画开始前显示的数值
       */
      moduleData: {
        type: Object,
        default: null
      },
      active: {
        type: Boolean,
        default: false
      }
  },
    data () {
        return {
          curpage: 0
      }
    },
    filters: {
      btnTextFn: function(start,end){
        let nowTime = new Date().getTime()
        if(nowTime <= start * 1000){
          return '未开始'
        }else if(nowTime >= end * 1000) {
          return '已结束'
        }else {
          return '砍价中'
        }
      }
    },  
    methods: {
      delModule() {
      this.$emit("delModule",this.moduleData);    
      },
      classNameFn(start,end){
        let nowTime = new Date().getTime()
        if(nowTime <= start * 1000){
          return false
        }else if(nowTime >= end * 1000) {
          return false
        }else {
          return true
        }
      }
    },
    created() {
    },
    components: {
  }
 }
</script>

<style scoped>

@import url("../baseModule.less");

.banner-top-title{font-size: 22px;color: #333;font-weight: bolder;line-height: 1.1;}
.banner-desc {
  font-size: 14px;
  color: #999;
  padding: 8px 0px 16px;
}
.curpage {
  font-size: 23px;
  color: #333;
}
.totalpage {
  line-height: 1.1;
  color: #999;
  transform: translateY(1px);
  font-size: 17px;
}
.banner-content {
  width: 100%;
}
.banner-img {
  width: 100%;
  height: 180px;
  background-repeat: no-repeat !important;
  background-size: cover!important;
  background-position: center!important;
}
.banner-title {
  font-size: 18px;
  color: #333;
  margin-top: 16px;
  font-weight: bolder;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.banner-subtitle {
  font-size: 14px;
  color: #999;
  margin-top: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>

<style lang="less" scoped="">
  .list {
  width: 100%;
  overflow-x: scroll; 
  // margin-top: @listMarTop;

  .item {
    width: 100%;
    margin-top: 19px;

    &:nth-of-type(1) {
      margin-top: 0;
    }

    .item-content {
      overflow: hidden;

      .position-message {
        width: 100%;
        margin-top: 12.5px;

        .left {

          .circle {
            width: 4.5px;
            height: 4.5px;
            background: #FFDD00;
            border-radius: 50%;
          }

          span {
            font-size: 12px;
            color: #999999;
            margin-left: 5px;
          }
        }

        .right {
          font-size: 12px;
          color: #999999;
        }
      }

      .goods-img {
        width: 100%;
        height: 185px;
        border-radius: 5px;
        background: #ddd;
        position: relative;
        overflow: hidden;

        img {
          width: 100%;
          position: absolute;
        }

        .shop-wrapper {
            position: absolute;
            right: 10px;
            top: 10px;
            .shop {
                background:rgba(0, 0, 0, 0.6);
                font-size: 12px;
                color: #fff;
                height: 24px;
                line-height: 24px;
                text-align: center;
                border-radius: 0 4px 4px 0;
                padding-left: 5px;
                padding-right: 5px;
            }
            .transfer-box {
                position: absolute;
                width: 9.5px;
                overflow: hidden;
                height: 24.25px;
                left: -14.5px;
                top: -2.475px;
                padding-top: 5px;
                padding-left: 5px;
                padding-bottom: 5px;
                .box {
                    width: 19.05px;
                    height: 19.05px;
                    background: rgba(0, 0, 0, 0.6);
                    transform:translateX(0) rotate(45deg);
                    border-radius: 4px;
                    z-index: 1
                }
                .point {
                    width: 4px;
                    height: 4px;
                    border-radius: 50%;
                    background-color: #fff;
                    position: absolute;
                    left: 6.75px;
                    top: 12.25px;
                    z-index: 3;
                }
            }
        }

      }

      .goods-title {
        width: 100%;
        min-height: 37.5px;
        font-size: 16px;
        color: #333;
        white-space: normal;
        line-height: 19.5px;
        margin-top: 10px;
      }

      .goods-message {
        width: 100%;
        // margin-left: -0.2rem;
        margin-top: 10px;

        .left {

          .now {
            font-family: "DINN";
            font-size: 20px;
            color: #F64031;
            font-weight: bold;
          }

          .unit {
            font-size: 11px;
            color: #F64031;
          }

          .before {
            font-size: 11px;
            color: #BABABA;
            font-family: "DINN";
            margin-top: 3.75px;
          }
          
          .text {
              color: #F64031;
              font-size: 12px;
          }
        }

        .right {
          transform: translateY(-2.5px);

          span {
            font-size: 10px;
            color: #999999;
          }

          .btn {
            height: 28px;
            border-radius: 14px 0 14px 14px;
            background: #F64031;
            font-size: 12px;
            color: #FFF;
            padding: 0 14px;
            box-sizing: border-box;
            margin-left: 10px;

            &.disable {
              background-color: #DFDFDF;
            }
            &.red {
              background-color: #F64031;
              color: #fff;
            }
          }

          .btn-off {
            background: #DFDFDF;
            color: #333333;
          }
        }
      }
    }
  }

  
}
</style>
